<template>
    <div class="flex">
        <el-drawer
        :title="this.$t('titles.authorization')"
        :visible.sync="drawer"
        :close-on-press-escape="false"
        custom-class="authorBox"
        :wrapperClosable="closable"
        :show-close="showClose"
        :direction="direction"
        @close="closeDrawer">

            <div v-show="!closable">
            </div>
            <div class="authorPsw flex">
                <el-input v-model="authorPassword" show-password :placeholder="this.$t('placeholder.authorizationPsw')" @keyup.enter.native="submitForm('ruleForm')"></el-input>
                <el-button  type="primary" @click="submitForm('ruleForm')">{{ this.$t("buttons.submit")}}</el-button>
            </div>
        </el-drawer>
        
    </div>
</template>

<script>
import { submitAuthor} from '../js/methods'
export default {
    name: 'authorization',
    components:{
        
    },
    data(){
        return{
            drawer: this.$store.state.authorization,
            direction: 'btt',
            closable: false,
            showClose: false,
            authorPassword:'',
        }
    },

    mounted(){
        let guide = window.localStorage.getItem("guide");
        if(guide){
            this.closable = true;
        }
    },

    methods:{
        //提交
        submitForm(formName) {
            const that = this;
            submitAuthor(this.authorPassword);
       },

       //关闭模态框
        closeDrawer: function(){
        this.$store.commit("switchAutherModule", false);
        }
    },

    //属性监听
    watch:{
       "$store.state.authorization": function(val){
           this.drawer = val;
       },

       "$store.state.guideModule": function(val){
          this.closable = !val;
      }
    }

}
</script>

<style scoped lang="less">
.authorPsw{
    padding: 0 15px;
    button{
        margin-left: 20px;
    }
}

</style>